import React, {useEffect, useLayoutEffect, useInsertionEffect} from 'react';

const App = () => {

  // 在渲染结束后执行
  useEffect(()=>{
    console.log('useEffect');
  })

  // 该 hooks 是同步执行的，绘制的时候执行
  useLayoutEffect(()=>{
    console.log('useLayoutEffect');
  })

  // 该 hooks 是同步执行的，会在 DOM 更新之前执行，还没有做绘制的时候执行
  useInsertionEffect(()=>{
    console.log('useInsertionEffect');
  })

  function useCSS(rule){
    useInsertionEffect(()=>{
      // 在这里执行添加一些动态样式
      // document.head.appendChild(rule)
      // console.log(document.head.appendChild);
      document.head.innerHTML = rule
    })
    return rule
  }

  useCSS('<style>* { width: 100%; height: 100%; background-color: red; }</style>')

  return (
    <div>

    </div>
  );
};

export default App;
